SVG

Coördinatenstelsel

Traditioneel coördinatenstelsel

Een traditioneel coördinatenstelsel ziet er als volgt uit:

Coördinatenstelsel in SVG

Het SVG-coördinatenstelsel ziet er anders uit:

In SVG nemen de getallen langs de y-as toe als je langs de y-as van hoog naar laag gaat.

In een SVG-plaatje zie je slechts een deel van het coördinatenstelsel. De oorsprong van het SVG-coördinatenstelsel is het punt (0,0). Normaliter is het punt (0,0) de linker bovenhoek van een SVG-plaatje. Dat wil zeggen dat je standaard een punt beschrijft in termen van "x is het aantal pixels geteld vanaf de linkerkant van het plaatje" en "y is het aantal pixels geteld vanaf de bovenkant van het plaatje". Verderop wordt uitgelegd hoe je de plaats van (0,0) kunt veranderen veranderen. (Dat gaat via een viewBox).

Weergave van SVG-plaatjes

SVG-plaatjes worden opgeslagen als tekstbestanden. Om een SVG-plaatje op een beeldscherm te laten zien, kun je een browser gebruiken. De gangbare browsers geven de plaatjes die zijn opgeslagen als tekstbestanden met extensie .svg gewoon weer. Je kunt de code voor eem svg-plaatje ook opnemen in een html-bestand. De code voor een svg-plaatje neem je daarn op tussen de SVG-tags. Een zo kort mogelijk stukje html-code kan er als volgt uitzien:

<!DOCTYPE html>
<html>
    <head>
        <title>Een titel boven in het browserscherm</title>
    </head>
    <body> 
        <!-- Hier komt de SVG-code voor een SVG-plaatje -->
    </body>
</html>

In de een aantal voorbeelden hieronder is de HTML-code opgenomen. In latere voorbeelden is de HTML-code weggelaten.

SVG-code

SVG-code heeft een soortgeijke opbouw als HTML. Het bestaat uit tags. Dat zijn tekenreeksen die beginnen met een < en eindigen met een >. Je hebt tags die een tekst omsluiten, zoals bijvoorbeeld <svg> en </svg> of <p> en </p>. De eerste tag wordt dan openings-tag genoemd en de andere wordt sluit-tag genoemd. Je hebt tags die geen tekst omsluiten. Die eindigen op /> Een voorbeeld is

<circle cx="0" cy="0" r="200" fill="skyBlue" />

Deze code stelt de binnenkant van een blauwe cirkel voor, met middelpunt (0,0) en straal van 200 pixels. Hoe groot een lengte van 200 pixels is, is moeilijk te zeggen, omdat dat van apparaat tot apparaat verschilt. De code

<svg>
    <circle cx="0" cy="0" r="200" fill="skyBlue" />
</svg>

resulteert in het volgende plaatje:

De cirkel is niet in zijn geheel te zien, omdat (0,0) de default linker bovenhoek van het plaatje is en alleen het deel rechtsonder van (0,0) wordt weergegeven, en omdat de cirkel veel groter is dan de default-grootte van een SVG-plaatje.

Je kunt het plaatje een grijze achtergrond geven door te beginnen een hele grote rechthoek te tekenen. Je ziet dan hoe groot het totale plaatje is, inclusief witruimte.

<svg>
    <rect x="-100" y="-100" width="1000" height="1000" fill="gray" /> 
    <circle cx="0" cy="0" r="200" fill="skyBlue" />
</svg>

Delen van een figuur die buiten het SVG-plaatje vallen, worden dus niet getoond. In bovenstaand plaatje is een volldige cirkel gedefinieerd, maar er wordt maar een deel van weergegeven.

Cirkel

Een cirkel als zwarte schijf

Een super eenvoudig plaatje dat je met SVG kan tekenen, is een cirkel. De code hiervoor is

<!DOCTYPE html>
<html>
    <head>
        <title>cirkel</title>
    </head>
    <body> 
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40"/>
        </svg>
    </body>
</html>

De SVG-code is ingebed in html-code. De SVG-code begint met <svg width="100" height="100">;. Dit is de openings-tag van de SVG-code. De SVG-code eindigt met </svg>. Dat is de sluit-tag van de SVG-code. Tussen de openings-tag en de sluit-tag wordt een rechthoekig plaatje gedefinieerd. Hoe groot het plaatje wordt, zie je aan de waarden van width en height. Het plaatje is 100 pixels breed (want width="100") en 100 pixels hoog (want height="100"). In dit voorbeeld gaat het om een plaatje van een cirkel. Die cirkel wordt gedefinieerd met de regel <circle cx="50" cy="50" r="40"/>. cx="50" betekent dat het middelpunt van de cirkel 50 pixels rechts van de linker zijlijn van het plaatje ligt. cy ="50" betekent dat het middelpunt van de cirkel 50 pixels onder de bovenkant van het plaatje ligt. r="40" betekent dat de straal van de cirkel 40 pixels lang is. Het plaatje ziet er als volgt uit:

Een andere kleur

We gaan deze cirkel een andere kleur geven. Dat kan door aan de definitie van de cirkel fill="red" toe te voegen. Dat wordt dan:

<!DOCTYPE html>
<html>
    <head>
        <title>cirkel</title>
    </head>
    <body> 
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" fill="red"/>
        </svg>
    </body>
</html>

Als je de html dan uitvoert, krijg je:

Een cirkel met een rand

Je kunt de cirkel ook een rand meegeven. Dat doe je door aan de definitie van de cirkel ook nog stroke="black" toe te voegen

<!DOCTYPE html>
<html>
    <head>
        <title>cirkel</title>
    </head>
    <body> 
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" fill="red" stroke="black"/>
        </svg>
    </body>
</html>

Het plaatje komt er dan als volgt uit te zien:

De rand breder maken

Dit is wel een hele dunne rand. Je maakt een dikkere rand door de dikte van de rand in de definitie van de cirkel op te nemen. Dit doe je door bijvoorbeeld stroke-width="5" toe te voegen. De rand wordt dan ongeveer 5 pixels dik. De code ziet er dan als volgt uit:

<!DOCTYPE html>
<html>
    <head>
        <title>cirkel</title>
    </head>
    <body> 
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="5"/>
        </svg>
    </body>
</html>

En het plaatje zelf ziet er als volgt uit:

Een hele brede rand

Je kunt de cirkel een veel dikkere rand geven door de stroke-width de waarde 20 te geven. De code wordt:

<!DOCTYPE html>
<html>
    <head>
        <title>cirkel</title>
    </head>
    <body> 
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="20"/>
        </svg>
    </body>
</html>

Het plaatje wordt:

Merk op dat de cirkel die bestaat uit de binnenkant en de rand nu groter is geworden.

Rechthoek

Een doorzichtige rechthoek

We leggen een rechthoek over de cirkel heen. De code daarvoor is:

<!DOCTYPE html>
<html>
    <head>
        <title>cirkel</title>
    </head>
    <body> 
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="20"/>
            <rect x="80" y="0" width="20" height="100" fill="green" 
                     stroke="blue" stroke-width="1" 
                     opacity="0.5" />
        </svg>
    </body>
</html>

<rect.../> is de opdracht om een rechthoek te tekenen. x="80" betekent dat de linker bovenhoek van de rechthoek 80 pixels verwijderd is van de linker kant van de rechthoek. y="0" betekent dat de linker bovenhoek van de rechthoek 0 pixels verwijderd is van de bovenkant van de rechthoek. opacity="0.5" betekent dat de rechhoetk half doorzichtig is. (opacity="1" betekent niet doorzichtig, d.w.z. volledig zichtbaar. opacity="0" betekent volledig doorzichtig, d.w.z. niet zichtbaar.) De Het plaatje verandert dan in:

Rechte lijn

We voegen een rechte lijn toe aan het plaatje.

<!DOCTYPE html>
<html>
    <head>
        <title>cirkel</title>
    </head>
    <body> 
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="20"/>
            <rect x="80" y="0" width="20" height="100" fill="green" 
                stroke="blue" stroke-width="1" opacity="0.5" />
            <line x1="99" y1="0" x2="99" y2="100" stroke="black" />
        </svg>
    </body>
</html>

<line.../> is de opdracht om een lijn te tekenen. x1 en y1 geven het beginpunt van de lijn aan. x2 en y2 geven het eindpunt van de lijn.

We zien in dit plaatje dat de cirkel met middelpunt (x=50, y=50) en straal 40 en rand van 20 net de lijn met x=99 raakt. Dat betekent dat de straal van de cirkel de helft van de randbreedte groter is geworden ten opzichte van de cirkel zonder rand. De cirkel zonder rand was de eerste cirkel die we op deze pagina lieten zien.

Andere figuren die we met SVG kunnen tekenen, zijn:

Ellips

<svg width="100" height="60">
    <ellipse cx="50" cy="30" rx="40" ry="30" fill="mediumOrchid" />
</svg>

Rechthoek met ronde hoeken

<svg width="120" height="100">
    <rect x="10" y="10" width="100" height="60" rx=20" ry="20" fill="deepSkyBlue" />
</svg>

Veelhoek (polygon)

<svg width="120" height="70">
    <polygon points="12,40 40,0 78,20 72,60 40,60" fill="lightGreen" stroke="black" />
</svg>

Pad van aaneengesloten rechte lijnen (polyline)

Polyline

<svg width="120" height="80">
    <polyline points="12,40 40,0 78,20 72,60 40,60" fill="yellow" stroke="black" />
</svg>

Pad van aaneengesloten lijnen (path)

Een aaneenschakeling van lijnen kun je ook bereiken met <path ...>

<svg width="100" height="100">
    <path d="M0,0 L100,0 L100,100 L0,100"  fill="paleGreen" stroke="black" />
</svg>

Hierin is:
M = Move to = Ga naar het punt (x, y)
L = Teken een lijn vanaf het vorige ount naar het punt (x, y)

Het begin- en eindpunt van het pad worden verbonden door Z (close-path).

<svg width="100" height="100">
    <path d="M0,0 L100,0 L100,100 L0,100 Z"  fill="paleGreen" stroke="black" />
</svg>

In plaats van M en L kun jed ook m en l gebruiken.

<svg width="100" height="100">
    <path d="m10,10 l80,0 l0,80 l-80,0 z"  fill="greenYellow" stroke="black" />
</svg>

Hier in is:
m = Ga ... eenheden naar rechts en ... eenheden omlaag.
l = Teken een lijn van het huidige punt ... eenheden naar rechts en ... eenheden omlaag.

Quadratic Bézier curve

Bij een Quadratic Bézier curve neem je eerst een rechte lijn in gedachten, bijvoorbeeld:

<svg width="120" height="20">
    <path d="M0,10 L120,10"  fill="greenYellow" stroke="black" />
</svg>

Vervolgens plaats je een punt bij die lijn ,die de lijn als het ware naar zich toe trekt.

<svg width="120" height="90">
    <path d="M0,80 Q60,0 120,80"  fill="greenYellow" stroke="black" />
    <circle cx="60" cy="3" r="3" fill="red" />
</svg>

Als je de punt verschuift, trekt het punt de lijn op een andere manier krom.

<svg width="120" height="90">
    <path d="M0,80 Q100,0 120,80"  fill="greenYellow" stroke="black" />
    <circle cx="60" cy="3" r="3" fill="red" />>
</svg>

Hierin wordt Q gevolgd door het control-punt en het eindpunt.

Cubic Bézier curve

Control-punten voor een cubic Bézier curve

Bij een Cubic Bézier curve ga je uit van 2 pijlen. Voorbeeld:

De te tekenen lijn heeft een begin en een eindpunt. Het beginpunt van de te tekenen lijn valt samen met het beginpunt van een van de pijlen. Het eindpunt van de lijn valt dan samen met het beginpunt van de andere pijl. Deze pijl die hoort bij het beginpunt van de te tekenen lijn geeft de richting aan van de te tekenen lijn bij het beginpunt. Deze pijl die hoort bij het eindpunt van de te tekenen lijn geeft de richting aan van de te tekenen lijn bij het eindpunt. De lijn wordt getekend met de volgende code:

<svg width="120" height="90">
    <path d="M30,40 C50,20 90,20 110,40" fill="lightSkyBlue" stroke="black" />
</svg>

Hierin is:
M = Move to = beginpunt van de lijn
C = Cubic Bézier = wordt gevolgd door drie paar coördinaten: het eindpunt van de eerste pijl (die begint in het beginpunt van de lijn), het eindpunt van de tweede pijl (die begint in het eindpunt van de lijn), het eindpunt van de lijn.

Als je de lijn en de pijlen in eenzelfde plaat tekent, zie je:

Als we de pijlen vanuit het begin en einde van de lijn de andere kant uittekenen, zoiets als:

dan buigt de lijn de andere kant op:

De code voor het laatste plaatje is:

<svg width="140" height="50">
    <path d="M30,10 10,30" stroke="red" />
    <path d="M4,24 L16,36 L4,36 Z" fill="red" />
    <path d="M110,10 130,30" stroke="red" />
    <path d="M136,24 L124,36 L136,36 Z" fill="red" />
    <path d="M30,10 C10,30 130,30 110,10 " fill="lightSkyBlue" stroke="black" />
<SVG>

Als je één van de pijlen langer maakt, bijvoorbeeld:

<svg width="140" height="70">
    <path d="M30,10 10,30" stroke="red" />
    <path d="M4,24 L16,36 L4,36 Z" fill="red" />
    <path d="M110,10 130,30" stroke="red" />
    <path d="M156,44 L144,56 L156,56 Z" fill="red" />
    <path d="M30,10 C10,30 150,50 110,10" fill="lightSkyBlue" stroke="black" />
<SVG>

dan wordt de vorm van de lijn gewijzigd. De lijn wordt als het ware richting de langste pijl getrokken.

Het eindpunt van een pijl wordt een control-punt genoemd. Er zijn dus vier punten van belang: het beginpunt van de lijn en het daarbij behorende eerste control-punt, en het eindpunt van de lijn, met het daarbij behorende tweede control-punt.

S-vormige cubic Bézier-lijnen

De volgende SVG-code trekt de lijn aan de bovenkant naar rechts en aan onderkant naar links.

<svg width="160" height="80">
    <path d="M50,10 90,10" stroke="red" />
    <path d="M90,6 L90,16 L96,10 Z" fill="red" />
    <path d="M50,60 10,60" stroke="red" />
    <path d="M10,54 L10,66 L4,60 Z" fill="red" />
    <path d="M50,10 C90,10 10,60 50,60" fill="lightSkyBlue" stroke="black" />
</svg>

De volgende SVG-code trekt de bovenkant van de lijn omlaag en de onderkant omhoog.

<svg width="160" height="80">
    <path d="M70,10 70,40" stroke="red" />
    <path d="M64,40 L76,40 L70,46 Z" fill="red" />
    <path d="M10,70 10,40" stroke="red" />
    <path d="M4,40 L16,40 L10,34 Z" fill="red" />
    <path d="M70,10 C70,40 10,40 10,70" fill="lightSkyBlue" stroke="black" />
</svg>

Bézier curves vloeiend in elkaar over laten gaan

Soms wil je twee cubic curves zo aan elkaar koppelen, dat zij gezamelijk een vloeiende lijn vormen.

<svg width="200" height="140">
    <path d="M10,60 55,10" stroke="red" />
    <path d="M49,4 L61,16 L61,4 Z" fill="red" />
    <path d="M100,60 55,110" stroke="red" />
    <path d="M49,104 L61,116 L49,116 Z" fill="red" />
    <path d="M10,60 C55,10 55,110 100,60" fill="lightSkyBlue" stroke="black" />
    <path d="M100,60 145,10" stroke="green" />
    <path d="M139,4 L151,16 L151,4 Z" fill="green" />
    <path d="M190,60 145,110" stroke="green" />
    <path d="M139,104 L151,116 L139,116 Z" fill="green" />
    <path d="M100,60 C145,10 145,110 190,60" fill="lightSkyBlue" stroke="black" />
</svg>

Kijk nu naar het punt waar de twee lijnen in elkaar overgaan. Omdat de lijnen vloeiend in elkaar overgaan, ligt daar de groene pijl in het verlengde van de rode pijl. In zo'n geval kun je de twee path-commando's voor de kromme lijn vervangen door een enkel path-commando.

<svg width="200" height="140">
    <path d="M10,60 55,10" stroke="red" />
    <path d="M49,4 L61,16 L61,4 Z" fill="red" />
    <path d="M100,60 55,110" stroke="red" />
    <path d="M49,104 L61,116 L49,116 Z" fill="red" />
    <path d="M190,60 145,110" stroke="green" />
    <path d="M139,104 L151,116 L139,116 Z" fill="green" />
    <path d="M10,60 C55,10 55,110 100,60 S145,110 190,60" fill="lightSkyBlue" stroke="black" />
</svg>

Horizontale en verticale lijnen

Binnen een path-commando staat H of h voor een horizontale lijn en V of v voor een verticale lijn. In een horizontale lijn blijft de y-waarde gelijk, dus is alleen de x-waarde verplicht. Bij een verticale lijn is de x-waarde constant, dus is daar alleen de y-waarde nodig. Bij hoofdletters specificeerje de horizontale of verticale coördinaten. Bij kleine letters specificeer je offsets (d.i. afstanden).

<svg width="200" height="60">
    <path d="M10,10 H50 V50 " fill="lightSkyBlue" stroke="black" />
</svg>

<svg width="200" height="60">
    <path d="M10,10 H50 V50 H100 " fill="lightSkyBlue" stroke="black" />
</svg>

<svg width="200" height="60">
    <path d="M10,10 H50 V50 H100 v-40" fill="lightSkyBlue" stroke="black" />
</svg>

<svg width="200" height="60">
    <path d="M10,10 H50 V50 H100 V35" fill="lightSkyBlue" stroke="black" />
</svg>

Je ziet dat het gebied dat gekleurd wordt m.b.v. fill afhangt van het begin- en eindpunt van de hele lijn die je tekent. Als je de lijn onderbreekt door een sprong met een M-commando, ontstaan er meerdere lijnen met afzonderlijke begin- en eindpunten. Je krijgt dan ook afzonderlijke gebieden die gekleurd worden met fill.

<svg width="300" height="60">
    <path d="M10,10 H50 V50 M60,10 V50 L100,10 L150,50 
             M160,10 v40 h40 M200,10 L240,50 v-40" 
        fill="lightSkyBlue" stroke="black" />
</svg>

Ellipsvormige boog

In een path-commando kun je ook een of meer cirkelvormige of ellipsvormige bogen opnemen. Nu wordt de vorm van een ellips bepaald door twee assen, een horizontale as en een vericale as. De horizontale as noemen we rx en de verticale as noemen we ry. De volgende ellips heeft een horizontale as van 30 pixels, en een verticale as van 20 pixels.

<svg width="100" height="60">
    <ellipse cx="50" cy="30" rx="30" ry="20" fill="lightSkyBlue" stroke="black" />
</svg>

Je wilt bijvoorbeeld in je lijn van deze ellips een boog-segment opnemen, dat door de punten 30,10 en 70,50 gaat. Geef dan deze waarden de namen x1, y1, x2 en y2. Dus x1=20, y1=10, x2=40 en y2=40. Nu zou je de ellips ook nog kunnen kantelen. Het aantal graden dat je de x-as zou willen draaien stop je in de variabele x-axis-rotation. Wij houden de waarde van deze variabele even op 0, dus x-axis-rotation=0. Nu zijn er twee ellips-segmenten die door de punten 20,10 en 40,40 kunnen verbinden, namelijk één die met de klok mee gaat, en één die tegen de klok in gaat (gezien vanuit het beginpunt 10,10). Als we de boog met de klok mee willen hebben, kiezen geven we sweep-flag de waarde 1. De syntax is nu

<path d="M x1,y1 A rx, ry x-axis-rotation large-arc-flag sweep-flag x2, y2" />

<svg width="500" height="60">
    <rect x="30" y="10" width="40" height="40" fill="khaki"/>
    <path d="M30,10 A 30,20 0 0 1 70,50" fill="lightSkyBlue" stroke="black" />
</svg>

<svg width="500" height="60">
    <rect x="30" y="10" width="40" height="40" fill="khaki"/>
    <path d="M30,10 A 30,20 0 1 0 70,50" fill="lightSkyBlue" stroke="black" />
</pre>

Tekst

In een SVG-plaatje kun je tekst opnemen.

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="lightSkyBlue" stroke="black" />
    <text x="72" y="44">ellips</text>
</svg>

Vet gedrukte letters krijg je middels font-weight="bold":

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="lightSkyBlue" stroke="black" />
    <text x="72" y="44" font-weight="bold">ellips</text>
</svg>

Schuin gedrukte letters krijg je middels font-style="italic".

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="lightSkyBlue" stroke="black" />
    <text x="72" y="44" font-style="italic">ellips</text>
</svg>

Onderstreepte letters krijg je middels text-decoration="underline".

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="lightSkyBlue" stroke="black" />
    <text x="72" y="44" text-decoration="underline">ellips</text>
</svg>

Doorgestreepte letters krijg je middels text-decoration="line-through".

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="lightSkyBlue" stroke="black" />
    <text x="72" y="44" text-decoration="line-through">ellips</text>
</svg>

Grotere (of kleinere) letters krijg je met font-size:

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="lightSkyBlue" stroke="black" />
    <text x="50" y="50" font-size="40">ellips</text>
</svg>

Een ander lettertype krijg je met font-family:

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="lightSkyBlue" stroke="black" />
    <text x="72" y="44" font-family="arial">ellips</text>
</svg>

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="lightSkyBlue" stroke="black" />
    <text x="72" y="44" font-family="calibri">ellips</text>
</svg>

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="lightSkyBlue" stroke="black" />
    <text x="62" y="44" font-family="courier">ellips</text>
</svg>

De kleur van een letter geef je aan met fill.

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="blanchedAlmond" stroke="black" />
    <text x="50" y="50" font-size="40" fill="red">ellips</text>
</svg>

Tekst krijgt een rand met stroke.

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="blanchedAlmond" stroke="black" />
    <text x="50" y="50" font-size="40" fill="red" stroke="black">ellips</text>
</svg>

Je maakt de rand dikker met stroke-width.

<svg width="180" height="80">
    <ellipse cx="90" cy="40" rx="80" ry="30" fill="blanchedAlmond" stroke="black" />
    <text x="50" y="50" font-size="40" fill="red" stroke="black" stroke-width="2">ellips</text>
</svg>

Coördinatenstelsel verplaatsen met viewBox

Standaard is het punt (0, 0) het punt in de linker bovenhoek van een SVG-plaatje. Daar is de x-coördinaat x gelijk aan nul, en de y-coördinaat ook.

<svg width="180" height="80">
    <line x1="0" y1="0" x2="150" y2="0" stroke="black" stroke-width="1" />
    <line x1="0",y1="0" x2="0" y2="80" stroke="black" stroke-width="1" />
    <ellipse cx="80" cy="50" rx="40" ry="20" fill="ivory" stroke="black" />
    <text x="50" y="55">x=0, y=0</text>
    <path d="M40,40 C 30,10 10,30 5,5 fill="white" fill="ivory" stroke="black">
</svg>

Dit punt (0, 0) kan ook naar een andere plek in het plaatje worden verschoven. Dit doe je door een viewBox toe te voegen aan de SVG-tag. De syntax is

viewBox=""min-x, min-y, width, height"

Min-x en min-y zijn de kleinste coördinaten die worden getoond. Om enkel het punt (0,0) naar een andere plek in het plaatje te verschuiven, maar verder het plaatje even groot te laten, moet je de waarden van width en height in de viewBox even groot laten zijn als die in de SVG-tag. Hieronder is plaatje aan het begin van deze paragraaf 50 pixels naar rechts en 50 pixels omlaag verschoven.

<svg width="230" height="120" viewBox="-50 -50 230,120">
    <line x1="-50" y1="-50" x2="230" y2="-50" stroke="red" stroke-width="3" />
    <line x1="-50" y1="-50" x2="-50" y2="120" stroke="red" stroke-width="1" />
    <circle cx="-50" cy="-100" r="4" fill="red"/>
    <line x1="0" y1="0" x2="150" y2="0" stroke="black" stroke-width="1" />
    <line x1="0" y1="0" x2="0" y2="80" stroke="black" stroke-width="1" />
    <ellipse cx="80" cy="50" rx="40" ry="20" fill="ivory" stroke="black" />
    <text x="50" y="55">x=0, y=0</text>
    <path d="M40,40 C 30,10 10,30 5,5 fill="white" fill="ivory" stroke="black">
</svg>

Lengte-eenheden wijzigen met viewBox

Hieronder zie je een plaatje dat 200 x 200 pixels groot is.

<svg width="200" height="200" >
    <rect x="0" y="0" width="200" height="200" fill="lightGreen" />
</svg>

Door een viewBox aan de SVG-tag toe te voegen, bereik je dat de plaatjes met een andere lengte-eenheid worden gemeten. Het volgende plaatje blijft even groot, maar binnen het plaatje wordt gemeten met een lengte-eenheid die 4 keer zo groot is, zowel in de x-richting als in de y-richting. Dat betekent dat de rechthoek van 50 x 50 het hele plaatje beslaat.

<svg width="200" height="200" viewBox="0,0 50 50" >
    <rect x="0" y="0" width="50" height="50" fill="lightGreen" />
</svg>

Merk op: In bovenstaande svg-code "<svg width="200" height="200" viewBox="0,0 50 50" >" is de verhouding 200 op 50 gelijk aan als 4 op 1. De rechthoek van 50×50 pixels wordt daardoor 4 keer zo groot weergegeven als 200×200 pixels.

Ook in het volgende voorbeeld is het plaatje 200 x 200 pixels groot. Maar de figuren die in het plaatje worden getekend, worden gemeten in een lengte-eenheid die 4 pixels lang is. Dat betekent dat dat een rechthoek met width="50" en height="50" een grootte heeft van 200 x 200 pixels. In deze rechthoek worden 3 kleine rechthoeken van 25 x 25 getekend. Die kleine rechthoeken worden 4 x 25 = 100 pixels breed en hoog.

<svg width="200" height="200" viewBox="0,0 50 50" >
    <rect x="0" y="0" width="50" height="50" fill="lightGreen" />
    <rect x="0" y="0" width="25" height="25" fill="khaki" />
    <rect x="25" y="0" width="25" height="25" fill="gold" />
    <rect x="0" y="25" width="25" height="25" fill="orange" />
</svg>

Als je in bovenstaande code de viewBox weghaalt, blijft het getoonde plaatje even groot (wat ik laat zien door de hele achtergrond van het hele plaatje grijs te kleuren) maar worden de andere vierkanten veel kleinier getekend.

<svg width="200" height="200" >
    <rect x="0" y="0" width="200" height="200" fill="Gray" />
    <rect x="0" y="0" width="50" height="50" fill="lightGreen" />
    <rect x="0" y="0" width="25" height="25" fill="khaki" />
    <rect x="25" y="0" width="25" height="25" fill="gold" />
    <rect x="0" y="25" width="25" height="25" fill="orange" </svg>
</svg>

Wat je op het scherm ziet (inclusief het grijze gebied) wordt de viewport genoemd.

Plaatjes groter en kleiner maken met viewBox

Met een viewBox kun je een plaatje ook veel groter en veel kleiner laten zien. Ik markeer een aantal punten met verschillende kleuren.

<svg width="50" height="50">
    <rect x="0" y="0" width="200" height="200" fill="lightGray" />
    <line x1="0" y1="0" x2="50" y2="0" stroke="black" stroke-width="1" />
    <line x1="0",y1="0" x2="0" y2="50" stroke="black" stroke-width="1" />
    <circle cx="0" cy="0" r="4" fill="red"/>
    <circle cx="40" cy="0" r="4" fill="green"/>
    <circle cx="0" cy="40" r="4" fill="blue"/>
    <circle cx="40" cy="40" r="4" fill="brown"/>
</svg>

Ik voeg een viewBox toe in de SVG-tag, maar ik laat width=50 en de height=50 ongemoeid.

<svg width="50" height="50" viewBox="-50 -50 100,100">
    <rect x="0" y="0" width="200" height="200" fill="lightGray" />
    <line x1="0" y1="0" x2="50" y2="0" stroke="black" stroke-width="1" />
    <line x1="0",y1="0" x2="0" y2="50" stroke="black" stroke-width="1" />
    <circle cx="0" cy="0" r="4" fill="red"/>
    <circle cx="40" cy="0" r="4" fill="green"/>
    <circle cx="0" cy="40" r="4" fill="blue"/>
    <circle cx="40" cy="40" r="4" fill="brown"/>
</svg>

De grootte van het plaatje in de viewBox is 100x100. De grootte van het plaatje in de SVG-tag buiten de viewBox is 50x50. Het gehele plaatje volgens de viewBox wordt gecomprimeerd en in een oppervlak van 50x50 geperst. Ik pas nu ook width=50 en de height=50 aan, en verander deze in width=100 en height=100.

<svg width="100" height="100" viewBox="-50 -50 100,100">
    <rect x="0" y="0" width="200" height="200" fill="lightGray" />
    <line x1="0" y1="0" x2="50" y2="0" stroke="black" stroke-width="1" />
    <line x1="0",y1="0" x2="0" y2="50" stroke="black" stroke-width="1" />
    <circle cx="0" cy="0" r="4" fill="red"/>
    <circle cx="40" cy="0" r="4" fill="green"/>
    <circle cx="0" cy="40" r="4" fill="blue"/>
    <circle cx="40" cy="40" r="4" fill="brown"/>
</svg>

Ik maak de width en de height in de SVG-tag nu nog groter.

<svg width="150" height="150" viewBox="-50 -50 100,100">
    <rect x="0" y="0" width="200" height="200" fill="lightGray" />
    <line x1="0" y1="0" x2="50" y2="0" stroke="black" stroke-width="1" />
    <line x1="0",y1="0" x2="0" y2="50" stroke="black" stroke-width="1" />
    <circle cx="0" cy="0" r="4" fill="red"/>
    <circle cx="40" cy="0" r="4" fill="green"/>
    <circle cx="0" cy="40" r="4" fill="blue"/>
    <circle cx="40" cy="40" r="4" fill="brown"/>
</svg>

Je ziet dat de grootte van het plaatje wordt bepaald door de waarden van width en height in de SVG-tag, en dat de waarden van width en height in de viewBox de grootte van het plaatje niet bepalen. De waarden van width en height in de viewBox geeft enkel weer welke afstanden werden gebruikt toen het plaatje gemaakt werd.
Je kunt width en height ook weglaten uit de SVG-tag. De grootte van het getoonde plaatje hangt dan af van hoe groot je het browser-venster maakt.

<svg viewBox="-10 -10 50,50">
    <rect x="0" y="0" width="200" height="200" fill="lightGray" />
    <line x1="0" y1="0" x2="50" y2="0" stroke="black" stroke-width="1" />
    <line x1="0",y1="0" x2="0" y2="50" stroke="black" stroke-width="1" />
    <circle cx="0" cy="0" r="4" fill="red"/>
    <circle cx="40" cy="0" r="4" fill="green"/>
    <circle cx="0" cy="40" r="4" fill="blue"/>
    <circle cx="40" cy="40" r="4" fill="brown"/>
</svg>

Alles wat je ziet van een SVG-plaatje op het beeldscherm, wordt de viewport genoemd.

Groeperen in SVG

Je kunt verschillende SVG-elementen samenvoegen tot een groep.

<svg width="240", height="90">
    <g id="circRectTria">
        <circle cx="50" cy="50" r="40" fill="red" />
        <rect x="90" y="10" width="40" height="80" fill="green" />
        <path d="M130,90 L230,90 180,10 Z" fill="blue">
    </g>
</svg>

Je kunt gezamenlijke kenmerken voor de elementen van deze groep definieren, bijvoorbeeld

<svg width="240", height="95">
    <g id="circRectTria" stroke="black" stroke-width="3">
        <circle cx="50" cy="50" r="40" fill="red" />
        <rect x="90" y="10" width="40" height="80" fill="green" />
        <path d="M130,90 L230,90 180,10 Z" fill="blue">
    </g>
</svg>

In een van de elementen kiezen we een kenmerk verschillend van de in de groep gedefineerde gemeenschappelijke kenmerken.

<svg  width="240", height="95">
    <g id="circRectTria" stroke="black" stroke-width="3">
        <circle cx="50" cy="50" r="40" fill="red" />
        <rect x="90" y="10" width="40" height="80" fill="green" />
        <path d="M130,90 L230,90 180,10 Z" fill="blue" stroke="crimson">
    </g>
</svg>

Herbruikbaar deel van een plaatje definiëren met <defs>

<defs>

Ik ga een tabel opbouwen uit basis-stukjes. Het eerste basis-stukje ziet er als volgt uit:

<svg width="222", height="24">
    <path d="M1,0 V22 M61,0 V22 M151,0 V22 M221,0 V22 M1,22 H221" 
          fill="white" stroke="black" />
</svg>

Ik neem dit basis-stukje op in een defs-tag.

<svg width="222" height="30" xlmns:xlink="http:www.w3.org/1999/xlink">
    <rect width="222" height="30" fill="lightGray" />
    <defs>
        <g id="tabelRegel">
            <path d="M1,0 V22 M61,0 V22 M151,0 V22 M221,0 V22 M1,22 H221" 
                  fill="white" stroke="black" />
        </g>
    </defs>
</svg>

Als je deze code opneemt in een html-bestand, wordt de groep niet getoond.

Je kunt de figuur tonen door een use-commando toe te voegen, waarin je verwijst naar de id van de groep.

<svg width="222" height="50" xlmns:xlink="http:www.w3.org/1999/xlink">
    <defs>
        <g id="tabelRegel">
            <path d="M1,0 V22 M61,0 V22 M151,0 V22 M221,0 V22 M1,22 H221" 
                  fill="white" stroke="black" />
        </g>
    </defs>
    <use href="#tabelRegel" y="22">
</svg>

Ik plaats een aantal van deze id-elementen onder elkaar.

<svg width="222" height="300" xlmns:xlink="http:www.w3.org/1999/xlink">
    <title>tabel</title>
    <defs>
        <g id="tabelRegel"> 
            <path d="M1,0 V22 M61,0 V22 M151,0 V22 M221,0 V22 M1,22 H221" 
                  fill="white" stroke="black" />
        </g>
    </defs>
    <use href="#tabelRegel" y="1" />
    <use href="#tabelRegel" y="23" />
    <use href="#tabelRegel" y="45" />
    <use href="#tabelRegel" y="67" />
    <use href="#tabelRegel" y="89" />
<SVG>

Ik gebruikte hier een groep waarin maar één path-commando voorkomt. Dat is eigenlijk onnodig complex. id="rec" kan toegevoegd worden aan het enkele path-commando. Ik voeg aan de defs-tag een definitie van de kopregel toe.

<svg width="222" height="110" xlmns:xlink="http:www.w3.org/1999/xlink">
    <title>tabel</title>
    <defs>
        <path id="rec" d="M1,0 V22 M61,0 V22 M151,0 V22 M221,0 V22 M1,22 H221" 
                fill="white" stroke="black" />
        <g id="kop">
            <path d="M1,1 H222" fill="white" stroke="black" />
            <use href="#rec" y="1" />
            <text x="18" y="16">id</text>
            <text x="64" y="16">omschrijving</text>
            <text x="160" y="16">bedrag</text>
        </g>
    </defs>
    <use href="#kop" y="1" />
    <use href="#rec" y="23" />
    <use href="#rec" y="45" />
    <use href="#rec" y="67" />
    <use href="#rec" y="89" />
</svg>

Voor de kopregel gebruik je <g id="kop"> om meerdere commando's in één groep onder te brengen.

Herbruikbare plaatjes maken met <symbol>

We gaan uit van het volgende plaatje:

<svg width="250" height="300" viewBox="-1,-1 5 6" >
    <rect x="-1" y="-1" width="5" height="6" fill="paleGoldenRod"/>
    <rect x="-1" y="-1" width="1" height="1" fill="oldLace"/>
    <rect x="1"  y="-1" width="1" height="1" fill="oldLace"/>
    <rect x="3"  y="-1" width="1" height="1" fill="oldLace"/>
    <rect x="0"  y="0"  width="1" height="1" fill="oldLace"/>
    <rect x="2"  y="0"  width="1" height="1" fill="oldLace"/>
    <rect x="-1" y="1"  width="1" height="1" fill="oldLace"/>
    <rect x="1"  y="1"  width="1" height="1" fill="oldLace"/>
    <rect x="3"  y="1"  width="1" height="1" fill="oldLace"/>
    <rect x="0"  y="2"  width="1" height="1" fill="oldLace"/>
    <rect x="2"  y="2"  width="1" height="1" fill="oldLace"/>
    <rect x="-1" y="3"  width="1" height="1" fill="oldLace"/>
    <rect x="1"  y="3"  width="1" height="1" fill="oldLace"/>
    <rect x="3"  y="3"  width="1" height="1" fill="oldLace"/>
    <rect x="0"  y="4"  width="1" height="1" fill="oldLace"/>
    <rect x="2"  y="4"  width="1" height="1" fill="oldLace"/>
    <path d="M0,3 L1,2 3,3 
             M1,0 L1,2"
          fill="none" stroke="lightGray" stroke-width="0.1"/>
    <path d="M0,3 L0,1 1,0 3,1 3,3 2,4 Z
             M0,1 L2,2 3,1
             M2,2 L2,4"
          fill="none" stroke="black" stroke-width="0.1"/>
</svg>

In de SVG-tag zien we dat het plaatje 250 x 300 pixels groot is, maar binnen het plaatje gebruiken we niet de lengte-eenheid pixel, maar een andere eenheid, die 50 pixels lang is. De geblokte achtergrond geeft aan hoe lang zo'n eenheid is.

We maken van de kubus een symbol. In het symbol-commando worden een id en een viewBox gedefinieerd. De grootte van de viewBox correspondeert met de grootte van het plaatje in het path-commando. Het symbol-commando zelf toont de kubus-figuur niet, het definieert enkel de kubus-figuur. Het tonen van de kubus gebeurt met een use-commando. In de use-tag worden de x- en y-waarden vastgelegd, alsmede de width en de height.

<svg width="250" height="300" viewBox="0 0 250 300">
    <rect x="-50" y="-50" width="300" height="350" fill="paleGoldenRod" />
    <symbol id="kubus" viewBox="-1 -1 5 6" >
        <path d="M0,3 L1,2 3,3 
                         M1,0 L1,2"
                      fill="none" stroke="lightGray" stroke-width="0.1"/>
        <path d="M0,3 L0,1 1,0 3,1 3,3 2,4 Z
                         M0,1 L2,2 3,1
                         M2,2 L2,4"
                      fill="none" stroke="black" stroke-width="0.1"/>
    </symbol>
    <use href="#kubus" x="0" y="0" width="250" y="300" />
</svg>

Als je eenmaal een symbol hebt gedefineerd, zoals de kubus-definitie hierboven, dan hoef je deze in een volgend SVG-plaatje niet meer opnieuw te definiëren. In de volgende code heb ik de afstanden gehalveerd.

<svg width="125" height="150" viewBox="0,0 125 125">
    <rect x="-25" y="-25" width="150" height="175" fill="paleGoldenRod" />
    <use href="#kubus" x="0" y="0" width="125" y="150" />
</svg>

In het use-commando verwijs je naar de symbol-definitie met #, net als in de a-tag van html. Dat betekent dat je alle plaatjes die zijn gedefinieerd als symbol in een apart bestand kunt opnemen, en steeds naar dat bestand kunt verwijzen, bijvoorbeeld via zoiets als
<use href="bestand.SVG#kubus" ... > .

Als je de kubus wat meer naar linksboven zou willen verschuiven, kun je de x- en y-waarden variëren. Bijvoorbeeld:

<svg width="125" height="150" viewBox="0,0 125 125">
    <rect x="-25" y="-25" width="150" height="175" fill="paleGoldenRod" />
    <use href="#kubus" x="-25" y="-25" width="125" y="150" />
</svg>

Je hoeft je er dus niet meer mee bezig te houden in welke eenheden de symbol is gedefineerd.

Je kunt symbols meerdere keren opnemen in een plaatje.

<svg width="250" height="300">
    <use href="#kubus" x="-40" y="-40" width="250" y="300" />
    <use href="#kubus" x="0"   y="-13" width="125" y="150" />
</svg>

Wat ik van dit plaatje onhandig vind, is dat het moeilijk is om uit te kienen wat er gebeurt als je iets in dit plaatje verandert. Stel ik wil het plaatje wat minder hoog maken, en verander in de SVG-tag de hoogte (d.i. height).

<svg width="250" height="200">
    <use href="#kubus" x="-40" y="-40" width="250" y="300" />
    <use href="#kubus" x="0"   y="-13" width="125" y="150" />
</svg>

De grote kubus is niet meer zo groot, lijkt naar boven te schuiven, en is niet meer in zijn geheel in beeld. De kleine kubus is zo te zien even groot gebleven, en is niet meer in zijn geheel binnen de grote kubus. Bovendien blijft er veel witruimte aan de onderkant van het plaatje.

Je kunt een idee krijgen van wat er aan de hand is door het plaatje te omlijsten met een rechthoek die de grootte van het plaatje weergeeft en door de grote en de kleine symbols apart te definiëren met een andere kleur en opacity.

<svg width="250" height="200" >
    <symbol id="kubus_groot_omlijst" viewBox="-1 -1 5 6" >
        <rect x="-1", y="-1", width="5" height="6" fill="lightBlue"/>
        <path d="M0,3 L1,2 3,3 
                 M1,0 L1,2"
              fill="none" stroke="lightGray" stroke-width="0.1"/>
        <path d="M0,3 L0,1 1,0 3,1 3,3 2,4 Z
                 M0,1 L2,2 3,1
                 M2,2 L2,4"
              fill="none" stroke="black" stroke-width="0.1" />
    </symbol>
    <symbol id="kubus_klein_omlijst" viewBox="-1 -1 5 6" >
        <rect x="-1", y="-1", width="5" height="6" fill="red" opacity="0.8"/>
        <path d="M0,3 L1,2 3,3 
                 M1,0 L1,2"
              fill="none" stroke="lightGray" stroke-width="0.1"/>
        <path d="M0,3 L0,1 1,0 3,1 3,3 2,4 Z
                 M0,1 L2,2 3,1
                 M2,2 L2,4"
              fill="none" stroke="black" stroke-width="0.1" />
    </symbol>
    <rect x="0", y="0", width="250" height="200" fill="royalBlue"/>
        <use href="#kubus_groot_omlijst" x="-40" y="-40" width="250" y="300" />
        <use href="#kubus_klein_omlijst" x="0"   y="-13" width="125" y="150" />
</svg>

We kunnen het plaatje waarin de kleine kubus geheel in de grote kubus is geplaatst, opnemen in een nieuw symbol. Door de grote en de kleine kubus in een nieuw symbol op te nemen, wordt de nieuwe symbol één figuur die intact blijft.

<svg width="250" height="220">
    <symbol id="kubussen" viewBox="0,0  250 300">
        <use href="#kubus" x="-40" y="-40" width="250" y="300" />
        <use href="#kubus" x="0"   y="-13" width="125" y="150" />
    </symbol>
    <use href="#kubussen"  x="0" y="0" width="250" height="300">
</svg>

Je kunt de nieuwe symbol in zijn geheel halveren.

<svg width="125" height="110">;
    <use href="#kubussen" x="25" y="-2" width="125" height="150">;
</svg>

Een geruit patroon maken

Een geruit patroon kan je helpen om te begrijpen hoe een plaatje gestructureerd is.

<svg x="0" y="0" width="200" height="150" viewBox="0,0 4 3" >
    <rect x="0"  y="0"  width="4" height="3" fill="royalBlue"/>
    <rect x="1"  y="0"  width="1" height="1" fill="lightBlue"/>
    <rect x="3"  y="0"  width="1" height="1" fill="lightBlue"/>
    <rect x="0"  y="1"  width="1" height="1" fill="lightBlue"/>
    <rect x="2"  y="1"  width="1" height="1" fill="lightBlue"/>
    <rect x="4"  y="1"  width="1" height="1" fill="lightBlue"/>
    <rect x="1"  y="2"  width="1" height="1" fill="lightBlue"/>
    <rect x="3"  y="2"  width="1" height="1" fill="lightBlue"/>
</svg>

In bovenstaande code zitten veel herhalingen. Een vierkantje dat de kleur lightBlue heeft kunnen we onderbrengen in een symbol.

<svg x="0" y="0" width="200" height="150" viewBox="0,0 4 3" >
    <symbol id="vierkantje_lightBlue" viewBox="0,0 1 1" >
        <rect fill="lightBlue" width="1" height="1" />
    </symbol>
    <rect x="0"  y="0" width="4" height="3" fill="royalBlue"/>
    <use href="#vierkantje_lightBlue" x="1" y="0" width="1" height="1" />
    <use href="#vierkantje_lightBlue" x="3" y="0" width="1" height="1" />
    <use href="#vierkantje_lightBlue" x="0" y="1" width="1" height="1" />
    <use href="#vierkantje_lightBlue" x="2" y="1" width="1" height="1" />
    <use href="#vierkantje_lightBlue" x="4" y="1" width="1" height="1" />
    <use href="#vierkantje_lightBlue" x="1" y="2" width="1" height="1" />
    <use href="#vierkantje_lightBlue" x="3" y="2" width="1" height="1" />
</svg>

Ik maak van dit ruitjespatroon een symbol.

<svg x="0" y="0" width="200" height="150" viewBox="0,0 4 3" >
    <symbol id="geruit_patroon_darkBlue_lightBlue_4_3" viewBox="0,0 4 3" >
        <rect x="0"  y="0" width="4" height="3" fill="royalBlue"/>
        <use href="#vierkantje_lightBlue" x="1" y="0" width="1" height="1" />
        <use href="#vierkantje_lightBlue" x="3" y="0" width="1" height="1" />
        <use href="#vierkantje_lightBlue" x="0" y="1" width="1" height="1" />
        <use href="#vierkantje_lightBlue" x="2" y="1" width="1" height="1" />
        <use href="#vierkantje_lightBlue" x="4" y="1" width="1" height="1" />
        <use href="#vierkantje_lightBlue" x="1" y="2" width="1" height="1" />
        <use href="#vierkantje_lightBlue" x="3" y="2" width="1" height="1" />
    </symbol>
    <use href="#geruit_patroon_darkBlue_lightBlue_4_3" x="0" y="0" width="4" height="3" />
</svg>

Ik maak een figuur die vanwege de lijnbreedte bij de uiteinden net niet in een 4 x 3 rechthoek past.

<svg x="-1" y="-1" width="250" height="200" viewBox="-1,-1 6 5" >
    <path d="M0,0 L1,2 3,1 4,3" fill="none" stroke-width="0.2" stroke="black"/>
</svg>

Dan leg ik die figuur als het ware op het ruitjespatroon.

<svg x="-1" y="-1" width="250" height="200" viewBox="-1,-1 6 5" >
    <rect x="-1" y="-1" width="6" height="5" fill="gray" />
    <use href="#geruit_patroon_darkBlue_lightBlue_4_3" x="0" y="0" width="4" height="3" />
    <path d="M0,0 L1,2 3,1 4,3" fill="none" stroke-width="0.2" stroke="black"/>
</svg>

Ik kan dan de lijn met het ruitjespatroon op de achtergrond uitvergroten.

<svg x="-1" y="-1" width="500" height="400" viewBox="-1,-1 6 5" >
    <rect x="-1" y="-1" width="6" height="5" fill="gray" />
    <use href="#geruit_patroon_darkBlue_lightBlue_4_3" x="0" y="0" width="4" height="3" />
    <path d="M0,0 L1,2 3,1 4,3" fill="none" stroke-width="0.2" stroke="black"/>
</svg>

Op deze manier kan ik de lijn tot in detail bekijken en desgewenst aanpassen.

Ruitjespapier maken

Ruitjespapier is een variant op een ruitjespatroon.

<svg x="-1" y="-1" width="600" height="600" viewBox="-1,-1 12 12" >
    <symbol id="ruitjespapier_10_10" viewBox="-0.05,-0.05  12 12" >
        <path d="M0,-0.05  V10.05" fill="none" stroke-width="0.1" stroke="royalBlue" />
        <path d="M10,-0.05 V10.05" fill="none" stroke-width="0.1" stroke="royalBlue" />

        <path d="M0,0  H10" fill="none" stroke-width="0.1" stroke="royalBlue" />
        <path d="M0,10 H10" fill="none" stroke-width="0.1" stroke="royalBlue" />
        <path d="M0,1  H10" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M0,2  H10" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M0,3  H10" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M0,4  H10" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M0,5  H10" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M0,6  H10" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M0,7  H10" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M0,8  H10" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M0,9  H10" fill="none" stroke-width="0.05" stroke="royalBlue" />

        <path d="M1,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M2,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M3,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M4,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M5,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M6,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M7,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M8,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="royalBlue" />
        <path d="M9,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="royalBlue" />

        <path d="M-0.05,0.2 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,0.4 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,0.6 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,0.8 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,1.2 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,1.4 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,1.6 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,1.8 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,2.2 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,2.4 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,2.6 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,2.8 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,3.2 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,3.4 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,3.6 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,3.8 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,4.2 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,4.4 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,4.6 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,4.8 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05 5.2 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,5.4 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,5.6 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,5.8 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,6.2 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,6.4 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,6.6 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,6.8 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,7.2 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,7.4 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,7.6 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,7.8 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,8.2 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,8.4 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,8.6 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,8.8 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,9.2 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,9.4 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,9.6 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M-0.05,9.8 H10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />

        <path d="M0.2,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M0.4,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M0.6,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M0.8,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M1.2,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M1.4,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M1.6,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M1.8,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M2.2,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M2.4,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M2.6,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M2.8,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M3.2,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M3.4,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M3.6,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M3.8,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M4.2,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M4.4,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M4.6,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M4.8,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M5.2,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M5.4,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M5.6,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M5.8,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M6.2,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M6.4,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M6.6,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M6.8,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M7.2,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M7.4,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M7.6,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M7.8,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M8.2,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M8.4,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M8.6,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M8.8,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M9.2,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M9.4,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M9.6,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
        <path d="M9.8,-0.05 V10.05" fill="none" stroke-width="0.05" stroke="lightBlue" />
    </symbol>
    <rect x="-1" y="-1" width="12" height="12" fill="beige" />
    <use href="#ruitjespapier_10_10" x="0" y="0" />
</svg>

Vervormen en verplaatsen

Groter en keiner maken

In de volgende figuur is de eenheid breedte 100 pixels, maar de viewBox geeft aan dat hij de plaatjes zal tekenen alsof 2 eenheden in de volle breedte van het plaatje passen, d.w.z. dat er 50 pixels in één eenheid passen. We zien 4 vierkantjes die 1 eenheid groot zijn, dus die elk 50 pixels breed en hoog zijn.

<svg width="100" height="100" viewBox="0,0 2 2" >
    <g id="vierkant_1">
        <path d="M0,0 L1,0 1,1 0,1" fill="goldenRod" />
        <path d="M1,0 L2,0 2,1 1,1" fill="lightGreen" />
        <path d="M0,1 L1,1 1,2 0,2" fill="yellow" />
        <path d="M1,1 L2,1 2,2 1,2" fill="skyBlue" />
    </g>
</SVG>

We plaatsen de groep vierkant_1 ergens in een viewport van 200x200 pixels. De viewBox="0 0 4 4" geeft aan dat plaatjes worden getekend alsof 4 eenheden in de volle breedte van de viewport passen, d.w.z. dat er 50 pixels in één eenheid passen. De viewport wordt dus 2 keer zo groot als het vorige plaatje, maar de eenheden waarmee gemeten wordt zijn hetzelfde gebleven. We zien in de groep 4 vierkantjes die 1 eenheid groot zijn, dus die elk 50 pixels breed en hoog zijn.

<svg width="200" height="200" viewBox="0,0 4 4" >
    <rect x="0" y="0" width="200" height="200" fill="gray" />
    <use href="#vierkant_1" x="0.3" y="0.3" />
</svg>

Daarna maken we de groep vierkant_1 groter met transform="scale(1.65)". Dat betekent : teken de groep 1,65 maal zo groot.

<svg width="200" height="200" viewBox="0,0 4 4" >
    <rect x="0" y="0" width="200" height="200" fill="gray" />
    <use href="#vierkant_1" x="0.3" y="0.3" transform="scale(1.65)" />
</svg>

We zien dat de groep niet alleen groter wordt, maar zich ook verplaatst. De afstand tot de x-as en de y-as wordt groter. We tekenen de groep in zijn oorspronkelijke grootte erbij.

<svg width="200" height="200" viewBox="0,0 4 4" >
    <rect x="0" y="0" width="200" height="200" fill="gray" />
    <use href="#vierkant_1" x="0.3" y="0.3" transform="scale(1.65)" />
    <use href="#vierkant_1" x="0.3" y="0.3" opacity="0.5" />
</svg>

We trekken nu rechte lijnen door de overeenkomstige hoekpunten van de vierkanten.

Deze lijnen blijken samen te komen in in het punt (0,0), dat is de oorsprong van het assenstelsel. De actie transform="scale(x)" houdt een vermenigvuldiging in vanuit het punt (0,0).

In de volgende voorbeelden plaatsen we steeds de linker bovenhoek van de groep vierkant_1 in het punt (0,0). Dan hebben we geen last van de verplaatsing, en hebben we alleen te maken met de vergroting.

<svg width="200" height="200" viewBox="0,0 4 4" >
    <rect x="0" y="0" width="200" height="200" fill="gray" />
    <use href="#vierkant_1" x="0" y="0" />
</svg>

In het volgende plaatje laten we exact dezelfde groep zien als in het vorige plaatje. Dit maal hebben we echter de groep afgebeeld met de waarde scale(2) in de transform-parameter. Dat betekent dat SVG de groep 2 maal zo groot afbeeldt.

<svg width="200" height="200" viewBox="0,0 4 4" >
    <defs id="vierkant_1">
        <path d="M0,0 L1,0 1,1 0,1" fill="goldenRod" />
        <path d="M1,0 L2,0 2,1 1,1" fill="lightGreen" />
        <path d="M0,1 L1,1 1,2 0,2" fill="yellow" />
        <path d="M1,1 L2,1 2,2 1,2" fill="skyBlue" />
    </defs>
    <use href="#vierkant_1" transform="scale(2)" />
</SVG>

Als we aan transform de waarde scale(0.5) toekennen, Wordt de groep de helft kleiner afgebeeld.

<svg width="200" height="200" viewBox="0,0 4 4" >
    <rect x="0" y="0" width="200" height="200" fill="gray" />
    <use href="#vierkant_1" transform="scale(0.5)" />
</svg>

Een scale van anderhalf (d.i. 1.5) leidt tot

<svg width="200" height="200" viewBox="0,0 4 4" >
    <rect x="0" y="0" width="200" height="200" fill="gray" />
    <use href="#vierkant_1" transform="scale(1.5)" />
</svg>

Uitrekken en inkrimpen

Als we de aan scale twee waarden meegeven, dan geldt de eerste parameter voor uitrekking of inkrimping van de x-waarde en de tweede parameter voor uitrekking of inkrimping van de y-waarde.

<svg width="200" height="200" viewBox="0,0 4 4" >
    <rect x="0" y="0" width="200" height="200" fill="gray" />
    <use href="#vierkant_1" transform="scale(-1, 1)" />
</svg>

Spiegelen in de y-as

Ik maak de viewport (d.i. het plaatje 2 maal zo breed), maar verander de viewBox zodanig, dat de eenheid ongewijgd blijft (50 pixels). Doordat ik transform de waarde scale(-1,1) meegeef, wordt de groep van vier vierkantjes gespiegeld in de y-as. De x-as en de y-as worden met een lichte streep weergegeven.

<svg x="-200" y="-50" width="400" height="250" viewBox="-4,-1 8 5" >
    <rect x="-200" y="-50" width="400" height="200" fill="gray" />
    <line x1="-200" y1="0" x2="200" y2="0" fill="none" stroke="lightGray" stroke-width="0.05" />
    <line x1="0" y1="-50" x2="0" y2="200" fill="none" stroke="lightGray" stroke-width="0.05" />
    <use href="#vierkant_1" transform="scale(-1, 1)" />
</svg>

Spiegelen in de x-as

<svg x="-200" y="-200" width="400" height="400" viewBox="-4,-4 8 8" >
    <rect x="-200" y="-200" width="400" height="400" fill="gray" />
    <line x1="-200" y1="0" x2="200" y2="0" fill="none" stroke="lightGray" stroke-width="0.05" />
    <line x1="0" y1="-200" x2="0" y2="200" fill="none" stroke="lightGray" stroke-width="0.05" />
    <use href="#vierkant_1" transform="scale(1, -1)" />
</svg>

Verschuiven

Je kunt een figuur verschuiven met behulp van translate. In het volgende voorbeeld is de groep vierkant_1 over een afstand van 1.5 eenheden naar rechts en 3.5 eenheden naar boven verschoven ten opzichte van het punt (0,0).

<svg x="-200" y="-200" width="400" height="400" viewBox="-4,-4 8 8" >
    <rect x="-200" y="-200" width="400" height="400" fill="gray" />
    <line x1="-200" y1="0" x2="200" y2="0" fill="none" stroke="lightGray" stroke-width="0.05" />
    <line x1="0" y1="-200" x2="0" y2="200" fill="none" stroke="lightGray" stroke-width="0.05" />
    <use href="#vierkant_1" transform="translate(1.5, -3.5)" />
</svg>

Draaien

Je kunt een figuur draaien met behulp van rotate. In het volgende voorbeeld is de groep vierkant_1 over 30 graden met de klok mee gedraaid ten opzichte van het punt (0,0).

<svg x="-200" y="-50" width="400" height="250" viewBox="-4,-1 8 5" >
    <rect x="-200" y="-200" width="400" height="400" fill="gray" />
    <line x1="-200" y1="0" x2="200" y2="0" fill="none" stroke="lightGray" stroke-width="0.05" />
    <line x1="0" y1="-200" x2="0" y2="200" fill="none" stroke="lightGray" stroke-width="0.05" />
    <use href="#vierkant_1" transform="rotate(30)" />
    <circle cx="3" cy="0" r="0.05" fill="red">
</svg>

Je kunt ook roteren om een ander punt dan (0,0). Hieronder wordt de groep vierkant_1 vanuit zijn oorspronkelijke positie met de linkerbovenhoek in het punt (0,0) 39 graden met de klok mee geroteerd om het punt (3,1)

<svg x="-200" y="-100" width="400" height="300" viewBox="-4,-2 8 6" >
    <rect x="-200" y="-100" width="400" height="500" fill="gray" />
    <line x1="-200" y1="0" x2="200" y2="0" fill="none" stroke="lightGray" stroke-width="0.05" />
    <line x1="0" y1="-200" x2="0" y2="200" fill="none" stroke="lightGray" stroke-width="0.05" />
    <use href="#vierkant_1" transform="rotate(30,3,1)" />
    <circle cx="3" cy="1" r="0.05" fill="red">
</svg>

Je kunt verschuivingen en rotaties combineren.

<svg x="-200" y="-50" width="400" height="250" viewBox="-4,-1 8 5" >
    <rect x="-200" y="-200" width="400" height="400" fill="gray" />
    <line x1="-200" y1="0" x2="200" y2="0" fill="none" stroke="lightGray" stroke-width="0.05" />
    <line x1="0" y1="-200" x2="0" y2="200" fill="none" stroke="lightGray" stroke-width="0.05" />
    <use href="#vierkant_1" transform="translate(2,1) rotate(30)" />
    <circle cx="2" cy="1" r="0.05" fill="red">
</svg>

Eerst wordt de rotatie uitgevoerd, en daarna de translatie.

Of in een andere volgorde.

<svg x="-200" y="-50" width="400" height="250" viewBox="-4,-1 8 5" >
    <rect x="-200" y="-200" width="400" height="400" fill="gray" />
    <line x1="-200" y1="0" x2="200" y2="0" fill="none" stroke="lightGray" stroke-width="0.05" />
    <line x1="0" y1="-200" x2="0" y2="200" fill="none" stroke="lightGray" stroke-width="0.05" />
    <use href="#vierkant_1" transform="rotate(30) translate(2,1)" />
</svg>

Eerst wordt de translatie uitgevoerd, en daarna de rotatie om (0,0) van de inmiddels verschoven figuur.

En je kunt nog meer translaties en rotaties combineren.

<svg x="-200" y="-50" width="400" height="250" viewBox="-4,-1 8 5" >
    <rect x="-200" y="-200" width="400" height="400" fill="gray" />
    <line x1="-200" y1="0" x2="200" y2="0" fill="none" stroke="lightGray" stroke-width="0.05" />
    <line x1="0" y1="-200" x2="0" y2="200" fill="none" stroke="lightGray" stroke-width="0.05" />
    <use href="#vierkant_1" transform="translate(2,1) rotate(30) translate(-2,-1)" />
</svg>

Het is soms lastig te verzinnen waar en in welke stand de figuur terecht zal komen.

Scheef trekken

We gaan weer uit van figuur vierkant_1:

<svg width="150" height="150" viewBox="0,0 3 3" >
    <rect x="0" y="0" width="200" height="200" fill="gray" />
    <use href="#vierkant_1"  />
</svg>

skewX( )

Als we aan het use-commando transform="skewX(20)" toevoegen, dan wordt de figuur getekend alsof de y-as 20 graden tegen de klok in gedraaid is.

<svg width="150" height="150" viewBox="0,0 3 3" >
    <rect x="0" y="0" width="150" height="150" fill="gray" />
    <use href="#vierkant_1" transform="skewX(20)" />
</svg>

Als we de figuur vierkant_1 niet in (0,0) laten beginnen, zoals hieronder:

<svg width="200" height="200" viewBox="0,0 4 4" >
    <rect x="0" y="0" width="150" height="150" fill="gray" />
    <use href="#vierkant_1" x="1" y="1" />
</svg>

dan krijgen we een soortgelijk effect.

<svg width="250" height="200" viewBox="0,0 5 4" >
    <rect x="0" y="0" width="150" height="150" fill="gray" />
    <use href="#vierkant_1" x="1" y="1" transform="skewX(20)" />
</svg>

De figuur wordt naar rechts verschoven zodanig dat punten die op één lijn liggen met de oorsprong, op één lijn met de oorsprong blijven liggen :

<svg width="250" height="200" viewBox="0,0 5 4" >
    <rect x="0" y="0" width="150" height="150" fill="gray" />
    <use href="#vierkant_1" x="1" y="1" transform="skewX(20)" />
    <line x1="0" y1="0" x2="4.1" y2="3" stroke="red" stroke-width="0.05" />
</svg>

skewY( )

transform="skewY(20)" toevoegen aan een use-commando heeft tot gevolg, dat de figuur getekend wordt alsof de x-as 20 graden met de klok mee is gedraaid.

<svg width="150" height="150" viewBox="0,0 3 3" >
    <rect x="0" y="0" width="150" height="150" fill="gray" />
    <use href="#vierkant_1" transform="skewY(20)" />
</svg>

Als je de figuur niet in (0,0) laat beginnen, blijft het effect hetzelfde.

<svg width="200" height="250" viewBox="0,0 4 5" >
    <rect x="0" y="0" width="150" height="150" fill="gray" />
    <use href="#vierkant_1" x="1" y="1" transform="skewY(20)" />
</svg>

Ook hier geldt: Punten die op één lijn liggen met de oorsprong, blijven op één lijn liggen met de oorsprong. In dit voorbeeld gaat er een rechte lijn door door (0,0) dooren twee hoekpunten van de figuur. Dat is zowel voor als na het scheef trekken van de figuur het geval.

<svg width="200" height="250" viewBox="0,0 4 5" >
    <rect x="0" y="0" width="150" height="150" fill="gray" />
    <use href="#vierkant_1" x="1" y="1" transform="skewY(20)" />
    <line x1="0" y1="0" x2="3" y2="4.1" stroke="red" stroke-width="0.05" />
</svg>

Formules bij de transformaties

Bij een transformatie worden punten verplaatst. We noemen het punt waar een punt (x,y) naar toe verplaatst wordt, (x',y').

De formules die horen bij de verschillende transformaties, zijn:

scale(s)		(x',y') = (s.x, s.y)
scale(s_x, s_y)		(x',y') = (s_x.x, s_y.y)
translate(t_x, t_y)		(x',y') = (x + t_x, y + t_y)
rotate(ϕ)		(x',y') = ( cos(ϕ).x - sin(ϕ).y , sin(ϕ).x + cos(ϕ).y )
skewX(ϕ)		(x',y') = ( x + tan(ϕ).y, y )
skewY(ϕ)		(x',y') = ( x, y + tan(ϕ).x )

Matrix

Alle combinaties van verplaatsingen , draaiingen en scheeftrekkingen in het platte vlak kun je weergeven met een matrixvermenigvuldiging, waarin 6 variabelen voorkomen.

Een vergroting of verkleining scale(s) vertaalt zich in a=s en d=s.
Een verschuiving translate(t_x,t_y) vertaalt zich in a=1, d=1, e=t_x en f=t_y.
Een scheeftrekking skewX(ϕ) vertaalt zich in a=1, d=1, c=tan(ϕ).
Een scheeftrekking skewY(ϕ) vertaalt zich in a=1, d=1, b=tan(ϕ).
Een draaiing rotate(ϕ) vertaalt zich in a=cos(ϕ), b=sin(ϕ), c=-sin(ϕ) en d=cos(ϕ).
Je krijgt een combinatie van deze bewegingen middels matrixvermenigvuldiging.

In het volgende voorbeeld zie je een klein vierkant dat een factor 2,25 groter wordt afgebeeld. Omdat de linker bovenhoek van het kleine vierkant niet samenvalt met het punt (0,0) verschuift de vergroting naar rechts en omlaag. transform="matrix(2.25, 0, 0, 2.25, 0, 0)" levert hetzelfde resultaat als transform="scale(2.25)".

<svg width="350" height="300" viewBox="0,0 7 6" >
    <rect x="0" y="0" width="600" height="300" fill="gray" />
    <use href="#vierkant_1" x="0.6" y="0.3" transform="matrix(2.25, 0, 0, 2.25, 0, 0)" />
    <use href="#vierkant_1" x="0.6" y="0.3" opacity="0.5"/>
    <line x1="0" y1="0" x2="5.85" y2="0.675" stroke="red" stroke-width="0.05"/>
    <line x1="0" y1="0" x2="5.85" y2="5.175" stroke="red" stroke-width="0.05"/>
    <line x1="0" y1="0" x2="1.35" y2="5.175" stroke="red" stroke-width="0.05"/>
</svg>

Gestippelde lijnen

Als voorbeeld nemen we een Bézier-lijn.

<svg width="350" height="200" viewBox="0,0 7 4" >
    <rect x="0" y="0" width="250" height="350" fill="lightGray" />
    <path d="M1,2 C3,-1 4,5 6,2" fill="none" stroke="blue" stroke-width="0.2" />
</svg>

We willen dat dit een gestippelde lijn wordt. Dit kunnen we doen door gebruik te maken van CSS. Naar CSS verwijzen we binnen SVG met de tag <style type="text/css">...</style>. We geven de lijn een id, en verwijzen binnen de style-tag met die id naar de lijn. In het volgende voorbeeld kennen we aan de lijn de tekenreeks "wave" toe als id en wijzigen daarmee binnen de style-tag de eigenschap dasharray. De eigenschap dasharray kent twee afstanden. Deze afstanden geven een patroon van stukjes getekende lijn en stukjes ontbrekende lijn. De eerste afstand heeft betrekking op een getekend stukje, en de tweede afstand geeft de lengte van het ontbrekende stukje lijn.

<svg width="350" height="200" viewBox="0,0 7 4" >
    <style type="text/css">
                path[id="wave"] {
                     stroke-dasharray: 0.5 0.3;
                }
    </style>
    <rect x="0" y="0" width="250" height="350" fill="lightGray" />
    <path id="wave" d="M1,2 C3,-1 4,5 6,2" fill="none" stroke="blue" stroke-width="0.2" />
</svg>

Als je ook de eigenschap stroke-linecap van de lijn wijzigt in round, dan krijgen de getekende stukjes lijn een rond uiteinde.

<svg width="350" height="200" viewBox="0,0 7 4" >
    <style type="text/css">
                path[id="wave2"] {
                     stroke-dasharray: 0.5 0.3;
                     stroke-linecap: round;
                }
    </style>
    <rect x="0" y="0" width="250" height="350" fill="lightGray" />
    <path id="wave2" d="M1,2 C3,-1 4,5 6,2" fill="none" stroke="blue" stroke-width="0.2" />
</svg>

Als je wat speelt met de afstanden in de eigenschap stroke-dasharray, kun je ook een gestippelde lijn krijgen.

<svg width="350" height="200" viewBox="0,0 7 4" >
    <style type="text/css">
                path[id="wave3"] {
                     stroke-dasharray: 0.001 0.299;
                     stroke-linecap: round;
                }
    </style>
    <rect x="0" y="0" width="250" height="350" fill="lightGray" />
    <path id="wave3" d="M1,2 C3,-1 4,5 6,2" fill="none" stroke="blue" stroke-width="0.2" />
</svg>

Pijlen

We beginnen met een lijn, die we in een aantal stappen willen verlengen tot een pijl.

<svg width="400" height="150" viewBox="0,0 40 15">
    <rect x="0" y="0" width="40" height="40" fill="lightGray" />
    <path d="M5,5 Q10,15 35,5"
                 fill="none" stroke="brown" stroke-width="0.3" />
</svg>

We definiëren nu een figuur die we willen gaan gebruiken als pijlpunt. Deze figuur moet beginnen in het punt (0,0). Dat is het punt waaraan de pijlpunt aan de lijn gekoppeld zal worden. Dit punt (0,0) is in onderstaande figuur weergegeven als een gele punt.

<svg width="80" height="100" viewBox="-1,-5 8 10">
    <rect x="-1" y="-5" width="40" height="40" fill="lightGray" />
    <polygon points="0,-4 6,0 0,4" fill="brown" />
    <circle cx="0" cy="0" r="0.4" fill="yellow" />
</svg>

We koppelen de pijlpunt aan de lijn door de pijlpunt als marker te definiëren met de marker-tag en in de definitie van de lijn aan te geven dat die marker aan de lijn moet worden gekoppeld.
In de definitie van de marker is overflow="visible" noodzakelijk. Dat zorgt ervoor dat de pijl in zijn geheel zichtbaar is, ook dat deel dat boven de x-as en/of links van de y-as ligt.
orient="auto" zorgt ervoor dat de pijl wijst in de juiste richting, dat is in het verlengde van de lijn..

<svg width="400" height="150" viewBox="0,0 40 15">
    <rect x="0" y="0" width="40" height="40" fill="lightGray" />
    <marker id="pijlpunt" overflow="visible" orient="auto">
        <polygon points="0,-4 6,0 0,4" fill="brown" />
    </marker>
    <path d="M5,5 Q10,15 35,5" marker-end="url(#pijlpunt)" 
                 fill="none" stroke="brown" stroke-width="0.3" />
</svg>

Er bestaat ook de mogelijkheid om aan het begin van een lijn een marker toe te voegen.

<svg width="400" height="150" viewBox="0,0 40 15">
    <rect x="0" y="0" width="40" height="40" fill="lightGray" />
    <marker id="pijlpunt" overflow="visible" orient="auto">
        <polygon points="0,-4 6,0 0,4" fill="brown" />
    </marker>
    <marker id="pijlterug" overflow="visible" orient="auto">
        <polygon points="0,-4 -6,0 0,4" fill="brown" />
    </marker>
    <path d="M5,5 Q10,15 35,5" marker-start="url(#pijlterug)"
                               marker-end="url(#pijlpunt)" 
                 fill="none" stroke="brown" stroke-width="0.3" />
</svg>

Attributen van het <marker>-element

We gaan de verschillende mogelijkheden voor markers wat meer uitpluizen. We beginnen met een een lijn en een pijlpunt-figuur:

<svg height="70" width="170">
    <path d="M 0,0 L 10,5 L 0,10 z" fill="black" />
    <line x1="10" y1="30" 
          x2="150" y2="50" 
          stroke="red" stroke-width="3" />
    <rect x="0" y="0" 
          width="170" height="70" 
          stroke="black" stroke-width="1" fill="none">
</svg>

We zetten de pijlpunt-figuur om in een marker. Deze marker nemen we op in een <defs>-element.

<svg height="70" width="170">
  <defs>
    <marker id="pijlpunt2" 
            markerWidth="10" markerHeight="10"
            markerUnits="userSpaceOnUse"
            refX="5" refY="5" 
            orient="auto">
      <path d="M 0,0 L 10,5 L 0,  10 z" fill="black" />
    </marker>
  </defs>
  <line x1="10" y1="30" x2="150" y2="50" 
        stroke="red" stroke-width="3" 
        marker-end="url(#pijlpunt2)" />
  <rect x="0" y="0" 
        width="170" height="70" 
        stroke="black" stroke-width="1" 
        fill="none">
</svg>

Laten we de code eens nalopen:

➊ Een marker wordt gedefineerd door een <marker>-element. ➋ Maar zo'n definitie maakt niet dat het element ook getoond wordt. Om duidelijk te maken dat het alleen om een definitie gaat nemen we het <marker>-element op in een <defs>-element. ➌ Het <marker>-element geven we een id, zodat we er later naar kunnen verwijzen. ➍ Het pad dat de pijlpunt definieert, bevindt zich binnen de rechthoek tussen de pixels (0,0) en (10,10). Dat is een rechthoek die 10 pixels breed is en 10 pixels hoog. Doordat we markerWidth de waarde 10 geven, en markerHeight ook de waarde 10 geven, wordt de marker (in een later stadium) volledig zichtbaar. ➎ Het attribuut markerUnits geeft aan hoe groot de pijlpunt gaat worden. De waarde markerUnits="userSpaceOnUse" betekent dat de lengte-eenheden die gebruikt gaan worden net zo groot zijn als de andere lengte-eenheden op de plek waar de pijlpunt wordt getoond. De pijlpunt krijgt dus zijn "normale" grootte. De andere waarde die aan markerUnits kan worden toegekend is strokeWidth. In dat geval wordt de pijlpunt afhankelijk van de dikte van de lijn (stroke-width). Als de dikte van de lijn 1 is, krijgt de pijlpunt zijn "normale" grootte. Als de dikte van de lijn 2 is, wordt de pijlpunt dubbel zo groot; Als de dikte van de lijn 3 is, wordt de pijlpunt dubbel zo groot; enzovoorts. markerUnits heeft strokeWidth als default waarde. ➏ refX en refY geven aan welke pixel van de pijlpunt gaat samenvallen met het einde van de lijn, waaraan de pijlpunt straks gekoppeld gaat worden. ➐ Het attribuut orient="auto" geeft aan dat de richting van de pijlpunt in het verlengde van het lijn zal liggen. ➑ Bij het definiëren van de lijn met het <line>-element, koppelen we met het attribuut marker-end="url(#pijlpunt2)" de marker, d.w.z. de pijlpunt, aan het einde van de lijn.

We wijzigen de dikte van de lijn en geven markerUnits de waarde strokeWidth. De pijlpunt wordt nu groter weergegeven:

<svg height="70" width="170">
  <defs>
    <marker id="pijlpunt3" 
            markerWidth="10" markerHeight="10"
            markerUnits="userSpaceOnUse"
            refX="5" refY="5" 
            orient="auto">
      <path d="M 0,0 L 10,5 L 0,  10 z" fill="black" />
    </marker>
  </defs>
  <line x1="10" y1="30" x2="150" y2="50" 
        stroke="red" stroke-width="3" 
        marker-end="url(#pijlpunt3)" />
  <rect x="0" y="0" 
        width="170" height="70" 
        stroke="black" stroke-width="1" 
        fill="none" />
</svg>

Als we het attribuut orient="auto" weglaten uit het <marker>-element, wordt de pijlpunt horizontaal weergegeven:

<svg height="70" width="170">
  <defs>
    <marker id="pijlpunt4" 
            markerWidth="10" markerHeight="10"
            markerUnits="userSpaceOnUse"
            refX="5" refY="5">
      <path d="M 0,0 L 10,5 L 0,  10 z" fill="black" />
    </marker>
  </defs>
  <line x1="10" y1="30" x2="150" y2="50" 
        stroke="red" stroke-width="3" 
        marker-end="url(#pijlpunt3)" />
  <rect x="0" y="0" 
        width="170" height="70" 
        stroke="black" stroke-width="1"
        fill="none" />
</svg>

Als we het attribuut orient="30" toevoegen, dan wijst de pijlpunt 30 graden omlaag ten opzichte van een horizontale lijn:

<svg height="70" width="170">
  <defs>
    <marker id="pijlpunt5" 
            markerWidth="10" markerHeight="10"
            markerUnits="userSpaceOnUse"
            refX="5" refY="5" 
            orient="30">
      <path d="M 0,0 L 10,5 L 0,  10 z" fill="black" />
    </marker>
  </defs>
  <line x1="10" y1="30" x2="150" y2="50" 
        stroke="red" stroke-width="3" 
        marker-end="url(#pijlpunt5)" />
  <rect x="0" y="0" 
        width="170" height="70" 
        stroke="black" stroke-width="1" 
        fill="none" />
</svg>

Schema van opeenvolgende stappen

Een schema bestaande uit rechthoeken en pijlen kan als volgt worden opgebouwd:

<svg width="400" height="50">
    <marker id="pijlpunt11" overflow="visible" orient="auto">
        <polygon points="0,-2 6,0 0,2" fill="brown" />
    </marker>
    <rect x="0"   y="0" width="160" height="40" fill="lightGreen" />
    <text x="60" y="25">stap 1</text>
    <path d="M170,20 L220,20" marker-end="url(#pijlpunt11)" 
         fill="none" stroke="brown" stroke-width="5" />
    <rect x="260" y="0" width="160" height="40" fill="lightGreen" />
    <text x="310" y="25">stap 2</text>
</svg>

Hoeveel ruimte neemt een tekstgedeelte in?

Je hebt een bepaalde tekst en je wilt weten hoeveel pixels die tekst lang is. Dit hangt af van welk lettertype en welke lettergrootte je hebt ingesteld. Lettertype en lettergrootte stel je in met de css-commando's font-family (voor lettertype) en font-size (voor lettergrootte). We gaan eerst kijken naar het geval dat je helemaal geen letertype of lettergrootte hebt ingesteld. Laten we als tekst 'the quick brown fox jumps over the lazy dog' nemen. Je maakt de een html-file, die de tekst toont:

<!DOCTYPE html>
<html>
    <head>
        <title>Breedte van een tekst achterhalen</title>
    </head>
    <body>
        <svg width="400" height="50">
            <text x="30">the quick brown fox jumps over the lazy dog</text>
        </svg>
    </body>
</html>

Je laat deze tekst in een browser zien. Na rechtsklikken in het browservenster kies je een menukeuze inspect, inspecteren, inspect (Q), of een omschrijving die daarop lijkt. In de browser verschijnt een tabblad Inspector met daarin de broncode van de html-pagina. Hierin selecteer je de regel waarin de tekst 'the quick brown fox jumps over the lazy dog' wordt gedefinieerd. De breedte en de hoogte van de tekst verschijnen dan in beeld.

Als je css-commando's in het html-bestand hebt opgenomen beïnvloedt dat mogelijkerwijs de grootte van de letters. In onderstaande html-code heb ik in een <style>-element css-commando's toegevoegd aan het html-bestand.

<!DOCTYPE html>
<html>
    <head>
        <title>Lengte van tekst schatten</title>
        <style>
            body {
                font-family: arial, calibri;
                font-size: large;
            }
        </style>
    </head>
    <body>
        <svg width="500" height="40">
            <text x="30" y="30">the quick brown fox
                         jumps over the lazy dog</text>
        </svg>
    </body>
</html>

Dit wordt in de browser als volgt getoond:

De tekst wordt nu groter afgebeeld. De breedte was eerst 289,117, dus iets korter dan 290 pixels. De breedte in de bovenstaande illustratie is 352,3 pixels.

Op de web-pagina die je nu bekijkt, is een ander lettertype en een andere lettergrootte ingesteld als de default waarden. Op deze pagina heeft de svg-code

<svg width="400" height="50">
    <text x="30">the quick brown fox jumps over the lazy dog</text>
</svg>

het volgende resultaat:

Als we met de Inspect-menuoptie de breedte van de tekst opvragen, zien we:

De tekst wordt op deze pagina dus iets groter dan de default-grootte weergegeven.

Een rechthoek om een tekst tekenen

We willen de tekst 'the quick brown fox jumps over the lazy dog' op een bepaalde plek in een svg-plaatje opnemen. De tekst 'the quick brown fox jumps over the lazy dog' bestaat uit 43 tekens. Dat betekent dat de u in het woord jumps de middelste letter is. Laten we zeggen dat we de u willen plaatsen in het punt met x=160 en y=15. De helft van 43 is 21,5. Links van de u staan 21 tekens, en rechts van de u ook. We zagen in de vorige paragraaf dat bij gebruik van een default lettergrootte van 16 pixels, de tekst 'the quick brown fox jumps over the lazy dog' iets kleiner is dan 290 pixels. Als we een rechthoek om de tekst heen willen tekenen, moet deze iets breder zijn dan 290 pixels. De middelste letter van de tekst, de u in het woord jumps, moet worden geplaatst op het punt x=160 en y=15 van het browserscherm. De helft van 290 is 145. De rechthoek zou dus links van de verticale lijn met x = 160 − 145 = 115 moeten beginnen. En de rechthoek zou rechts van de verticale lijn met x = 160+145 = 305 moeten eindigen. We kijken hoe het plaatje eruit als we de rechthoek op kolom x=10 laten beginnen en op kolom x=300 laten eindigen. De hoogte van de rechthoek bepalen we als volgt: De default letterhoogte (font-size) is 16 pixels. Een aantal letters (g, j, p, q en y) hebben een lijn naar beneden. Ik kies voor 4 pixels voor onder de lijn 12 pixels boven de lijn. Het text-element waar de letters inpassen wordt iets groter, namelijk 19 pixels. Deze berekening leidt tot het volgende plaatje:

<!DOCTYPE html>
<html>
    <head>
        <title>Rechthoek om een tekstregel tekenen</title>
    </head>
    <body>
        <svg width="400" height="65">
            <rect x="10" y="5" width="300" height="30" fill="red" />
            <text x="15" y="24">the quick brown fox jumps over the lazy dog</text>
        </svg>
    </body>
</html>

In een browser wordt dat als volgt weergegeven:

Na rechtsklikken gevolgd door de menuoptie "inspect" vind je de grootte van de html-elementen html, body, svg, rect en text:

De body heeft een marge van 8 pixels.

Daardoor begint het svg-element in kolom x="8px".

Binnen het svg-element begint de rechthoek rect in kolom x="10px". Binnen het html-element is dit dus in kolom 18 pixels.

Binnen het svg-element begint de tekst rect in kolom x="15px". Binnen het html-element is dit dus in kolom 23 pixels".

De u in het woord jumps bevindt zich in het midden van de tekst. Deze letter bevindt zich bij kolom x="160" van het svg-element en in kolom 168px van het html-element.

We kunnen al deze lengte-eenheden in één plaatje samenbrengen:

<!DOCTYPE html>
<html>
    <head>
        <title>Rechthoek om een tekstregel tekenen</title>
    </head>
    <body>
        <svg width="400" height="100">
            <rect x="10" y="5" width="300" height="30" fill="red" />
            <text x="15" y="24">the quick brown fox jumps over the lazy dog</text>
            
            <rect x="0"  y="40" width="10" height="20" fill="skyBlue" />
            <rect x="10" y="40" width="5" height="20" fill="blue" />
            <rect x="15" y="40" width="145" height="20" fill="lightGreen" />
            <rect x="160" y="40" width="145" height="20" fill="lightSeaGreen" />
            <rect x="305" y="40" width="5" height="20" fill="blue" />

            <rect x="315" y="0"    width="20" height="5" fill="skyBlue" />
            <rect x="315" y="5"    width="20" height="5.5" fill="blue" />
            <rect x="315" y="10.5" width="20" height="14" fill="lightGreen" />
            <rect x="315" y="24.5" width="20" height="5" fill="lightSeaGreen" />
            <rect x="315" y="29.5" width="20" height="5.5" fill="blue" />
            
        </svg>
    </body>
</html>

Boven en links van de rode rechthoek bevindt zich een L-vormig wit gedeelte. Dit gedeelte bestaat uit twee lagen.
Er is een buitenste witte laag die correspondeert met de marge van de body van 8 pixels dik. (Dat is de ruimte tussen de body en de inhoud van de body.)
Daarbinnen is er een binnenste witte laag die correspondeert met het wit gedeelte van het svg-plaatje. In het volgende illustratie is dit L-vormige gedeelte lichtblauw gekleurd.

<!DOCTYPE html>
<html>
    <head>
        <title>Rechthoek om een tekstregel tekenen</title>
    </head>
    <body>
        <svg width="400" height="100">
            <rect x="10" y="5" width="300" height="30" fill="red" />
            <text x="15" y="24">the quick brown fox jumps over the lazy dog</text>

            <rect x="0"  y="40" width="10" height="20" fill="skyBlue" />
            <rect x="10" y="40" width="5" height="20" fill="blue" />
            <rect x="15" y="40" width="145" height="20" fill="lightGreen" />
            <rect x="160" y="40" width="145" height="20" fill="lightSeaGreen" />
            <rect x="305" y="40" width="5" height="20" fill="blue" />

            <rect x="315" y="0"    width="20" height="5" fill="skyBlue" />
            <rect x="315" y="5"    width="20" height="5.5" fill="blue" />
            <rect x="315" y="10.5" width="20" height="14" fill="lightGreen" />
            <rect x="315" y="24.5" width="20" height="5" fill="lightSeaGreen" />
            <rect x="315" y="29.5" width="20" height="5.5" fill="blue" />

            <path 
                d="M0,0 L0,35 10,35 10,5 310,5 310,0 Z" fill="skyBlue" />  
        </svg>
    </body>
</html>

Binnen de rode rechthoek is er een tekstgedeelte. Dit tekstgedeelte heeft in het volgende plaatje een gele kleur gekregen.

<!DOCTYPE html>
<html>
    <head>
        <title>Rechthoek om een tekstregel tekenen</title>
    </head>
    <body>
        <svg width="400" height="100">
            <rect x="10" y="5" width="300" height="30" fill="red" />
            
            <rect x="15" y="10.5" width="290" height="19" fill="yellow" />
            
            <text x="15" y="24">the quick brown fox jumps over the lazy dog</text>
            
            <rect x="0"  y="40" width="10" height="20" fill="skyBlue" />
            <rect x="10" y="40" width="5" height="20" fill="blue" />
            <rect x="15" y="40" width="145" height="20" fill="lightGreen" />
            <rect x="160" y="40" width="145" height="20" fill="lightSeaGreen" />
            <rect x="305" y="40" width="5" height="20" fill="blue" />

            <rect x="315" y="0"    width="20" height="5" fill="skyBlue" />
            <rect x="315" y="5"    width="20" height="5.5" fill="blue" />
            <rect x="315" y="10.5" width="20" height="14" fill="lightGreen" />
            <rect x="315" y="24.5" width="20" height="5" fill="lightSeaGreen" />
            <rect x="315" y="29.5" width="20" height="5.5" fill="blue" />
            
        </svg>
    </body>
</html>

De grootte van het tekstgedeelte is in de zijbalken met twee groene kleuren weergegeven. In de horizontale balk geeft de overgang van de lichtgroene naar de zeegroene kleur het midden van de tekst aan, de plaats waar de u in het woord jumps staat. In de verticale balk geeft de overgang van de lichtgroene naar de zeegroene kleur de plaats van de lijn aan waarop de tekst geschreven is. Bij de letters g, j, p, q en y is er een deel van de letter dat onder die lijn komt.

Breedte van een tekst achterhalen met JavaScript

Je kunt met JavaScript achterhalen hoe breed een tekst is in een svg-plaatje.

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>JavaScript</title>
    </head>
    <body>
        <svg width="350" height="50">
            <rect x="0" y="0" width="350" height="50" fill="yellow" />
            <text x="16" y="30" id="svg_text">the quick brown fox jumps over the lazy dog</tekst>
        </svg><br>
        breedte
        <div id="hierBreedte"></div>
        <script>
            var breedte = document.getElementById('svg_text').getComputedTextLength();
            document.getElementById('hierBreedte').innerHTML = breedte;
        </script>
    </body>
</html>

Je kunt de breedte in pixels ook wegschrijven naar een bestand.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>File maken vanuit JavaScript</title>
    </head>
    <body>
        <svg width="350" height="50">
            <rect x="0" y="0" width="350" height="50" fill="yellow" />
            <text x="16" y="30" id="svg_text">the quick brown fox jumps over the lazy dog</tekst>
        </svg>
        <br><br>
        <button onclick = "downloadFile()"> download tekstlengte in pixels naar bestand pixellengte.txt </button>
        <script>
            const downloadFile = () => {
                const inhoud = document.getElementById('svg_text').innerHTML;
                const breedte = document.getElementById('svg_text').getComputedTextLength();
                const link = document.createElement("a");
                const content = inhoud + ';' + breedte + ';' 
                const file = new Blob([content], { type: 'text/plain' });
                link.href = URL.createObjectURL(file);
                link.download = "pixellengte.txt";
                link.click();
                URL.revokeObjectURL(link.href);
            };
        </script>
    </body>
</html>

Het resultaat in een browser is:

Klik op de knop "download tekstlengte in pixels naar bestand pixellengte.txt". Dan wordt het bestand pixellengte.txt gedownload.

Geneste svg-tags en symbols

Hieronder vind je de html-code met svg voor een vierkant.

<!DOCTYPE html>
<html>
    <head>
        <title>Vierkant</title>
    </head>
    <body>
        <svg width="52" height="52">
            <rect x="1" y="1" width="50" height="50" fill="lightGreen" stroke="black"/>
        </svg>
    </body>
</html>

In de volgende code hebben is de rechthoek opgenomen in een geneste svg. Met een use-tag wordt het vierkant op een andere plaats in het plaatje nog een keer getoond.

<!DOCTYPE html>
<html>
    <head>
        <title>Tekst</title>
   </head>
    <body>
        <svg id="plaatje"width="502" height="152" fill="white" stroke="black">
            <rect x="1" y="1" width="500" height="150" stroke="black"/>
            <svg id="vierkant" width="52" height="52">
                <rect x="1" y="1" width="50" height="50" fill="lightGreen" stroke="black"/>
            </svg>
            <use href="#vierkant" x="200" y="50"/>;
        </svg>
    </body>
</html>

Een browser toont:

Het vierkant dat gedefinieerd wordt in de binnenste svg-tag wordt getoond, en het vierkant wordt nogmaals getoond door de use-tag.

Als je de binnenste svg-tag opneemt in een defs-tag, wordt het vierkant op positie x=1 en y=1 niet meer getoond. Je kunt ook nu met de use-tag het vierkant nu op allerlei posities tonen.

 
<!DOCTYPE html>
<html>
    <head>
        <title>Vierkant</title>
   </head>
    <body>
        <svg id="plaatje"width="502" height="502" fill="white" stroke="black">
            <defs>
                <svg id="vierkant" width="50" height="50" viewBox="0 0 50 50">
                    <rect x="0" y="0" width="50" height="50" fill="lightGreen" stroke="black"/>
                </svg>
            </defs>
            <rect x="1" y="1" width="400" height="230" stroke="black"/>
            <use href="#vierkant" x="10" y="10"/>
            <use href="#vierkant" x="100" y="60"/>
            <use href="#vierkant" x="200" y="110"/>
            <use href="#vierkant" x="300" y="160"/>
            <use href="#vierkant" x="310" y="170"/>
        </svg>
    </body>
</html>

Als je in de binnenste svg-tag de tekenreeks svg vervangt door symbol, wordt het vierkant op positie x=1 en y=1 ook niet meer getoond. Je hoeft een symbol-tag niet in een defs-tag op te nemen.

<!DOCTYPE html>
<html>
    <head>
        <title>Tekst</title>
   </head>
    <body>
        <svg id="plaatje"width="502" height="152" fill="white" stroke="black">
            <rect x="1" y="1" width="500" height="150" stroke="black"/>
            <symbol id="vierkant" width="52" height="52">
                <rect x="1" y="1" width="50" height="50" fill="lightGreen" stroke="black"/>
            </symbol>
            <use href="#vierkant" x="200" y="50"/>;
        </svg>
    </body>
</html>

Je kunt het symbol uitbreiden met een tekst. Deze tekst wordt dan automatisch in alle kopiën getoond. De tekst kun je met een css-opdrachthet gewenste lettertype geven.

 
<!DOCTYPE html>
<html>
    <head>
        <title>Tekst</title>
   </head>
    <body>
        <svg id="plaatje"width="502" height="502" fill="white" stroke="black">
            <symbol id="vierkant" width="50" height="50" viewBox="0 0 50 50">
                <rect x="0" y="0" width="50" height="50" fill="lightGreen" stroke="black"/>
                <style>
                    text {
                        font-family: Calibri;
                        fill: black;
                    }
                </style>
                <text x="10" y="30">step</text>
            </symbol>
            <rect x="1" y="1" width="400" height="230" stroke="black"/>
            <use href="#vierkant" x="10" y="10" class="vierkant"/>
            <use href="#vierkant" x="100" y="60"/>
            <use href="#vierkant" x="200" y="110"/>
            <use href="#vierkant" x="300" y="160"/>
            <use href="#vierkant" x="310" y="170"/>
            <use href="#vierkant" x="10" y="110"/>
        </svg>
    </body>
</html>

De browser toont:

Views

Als je iets nieuws aan het leren bent, stuit je soms om zaken waarvan je niet weet onder welke omstandigheden het handig is om te gebruiken. Dat geldt voor mij voor views. Terwijl ik bezig was om mij SVG eigen te maken kon ik een voorbeeld van een werkende view niet voor elkaar boksen. Dat heeft waarschijnlijk te maken met mij gebrekkige kennis van CSS. Het volgende gedeelte laat niettemin iets zien over views, en ook iets overs geneste svg.

Als voorbeeld nemen we een cirkel.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" 
                fill="coral" stroke="black" stroke-width="5"/>
</svg>

Diezelfde cirkel kunnen we ook op een andere manier tekenen. We definiëren eerst een view waarin een viewBox voorkomt, die overeenstemt de viewBox van de viewport. Daarna definiëren we de cirkel als geneste svg. Dat wil zeggen als een svg-tag binnen een svg-tag.

<svg width="100" height="100">
    <view id="cirkel_2" viewBox="0,0 100,100" />
    <svg width="100" height="100" viewBox="0,0 100 100">
        <circle cx="50" cy="50" r="40" 
                    fill="coral" stroke="black" stroke-width="5"/>
    </svg>
</svg>

Deze code kunnen we dan vereenvoudigen door de viewBox in de svg-tag in langere eenheden te definiëren. In dit voorbeeld zeggen we dat de view 10 lengte-eenheden lang is. Dat wil zeggen dat binnen de geste svg-tag een lengte-eenheid van 10 pixels wordt gebruikt. De cirkel moeten we dus binnen de geneste svg definiëren een lengte-eenheid van 10 pixels gebruiken. Dat betekent dat we t.o.v. het vorige voorbeeld de eenheden binnen de geneste svg moeten delen door 10.

<svg width="100" height="100">
    <view id="cirkel_3" viewBox="0,0 100,100" />
    <svg width="100" height="100" viewBox="0,0 10 10">
        <circle cx="5" cy="5" r="4" 
                    fill="coral" stroke="black" stroke-width="0.5"/>
    </svg>
</svg>

In het volgende voorbeeld gaan we binnen één plaatje vier view's maken. We beginnen met een cirkel, een rechthoek, een driehoek en een ster in één viewport.

<svg width="200" height="200">
    <rect x="0" y="0" width="200" height="200" fill="gray" />
    <rect x="0" y="0" width="100" height="100" fill="lightGray" />
    <rect x="100" y="100" width="100" height="100" fill="lightGray" />
    <circle cx="50" cy="50" r="40" 
                fill="coral" stroke="black" stroke-width="5"/>
    <rect x="110" y="10" width="80" height="80" 
                fill="greenYellow" stroke="black" stroke-width="5" />
    <path d="M50,110 L10,190 L90,190 Z"     
                fill="yellow" stroke="black" stroke-width="5" />
    <path d="M110,110 L150,140 190,110 160,150 190,190 150,160 
                110,190 140,150 Z"  
                fill="crimson" stroke="black" stroke-width="5" />
</svg>

Elk van de vier figuren gaan we nu definiëren als view met een geneste svg.

<svg width="200" height="200">
    <view id="cirkel" viewBox="0,0 100,100" />
    <svg width="100" height="100" viewBox="0,0 100 100">
        <rect x="0" y="0" width="100" height="100" fill="lightGray" />
        <circle cx="50" cy="50" r="40" 
                    fill="coral" stroke="black" stroke-width="5"/>
    </svg>
    <view id="rechthoek" viewBox="100,0 100,100" />
    <svg x="100" y="0" width="100" height="100" viewBox="0,0 100 100" >
        <rect x="0" y="0" width="100" height="100" fill="gray" />
        <rect x="10" y="10" width="80" height="80" 
                    fill="greenYellow" stroke="black" stroke-width="5" />
    </svg>
    <view id="driehoek" viewBox="0,100 100,100" />
    <svg x="0" y="100" width="100" height="100" viewBox="0,0 100 100" >>
        <rect x="0" y="0" width="100" height="100" fill="gray" />
        <path d="M50,10 L10,90 L90,90 Z"     
                    fill="yellow" stroke="black" stroke-width="5" />
    </svg>
    <view id="ster" viewBox="100,100 100,100" />
    <svg x="100" y="100" width="100" height="100" viewBox="0,0 100 100" >>
        <rect x="0" y="0" width="100" height="100" fill="lightGray" />
        <path d="M10,10 L50,40 90,10 60,50 90,90 50,60
                    10,90 40,50 Z"  
                    fill="crimson" stroke="black" stroke-width="5" />
    </svg>
</svg>

Net als in het voorbeeld van de enkele cirkel, gaan we in de viewBox van de geneste svg een langere lengte-eenheid definiëren. Waardoor we bij de figuren binnen de geneste svg-tags de lengte-eenheden moeten verkleinen.

<svg width="200" height="200">
    <view id="cirkel" viewBox="0,0 100,100" />
    <svg width="100" height="100" viewBox="0,0 10 10">
        <rect x="0" y="0" width="10" height="10" fill="lightGray" />
        <circle cx="5" cy="5" r="4" 
                    fill="coral" stroke="black" stroke-width="0.5"/>
    </svg>
    <view id="rechthoek" viewBox="100,0 100,100" />
    <svg x="100" y="0" width="100" height="100" viewBox="0,0 10 10" >
        <rect x="0" y="0" width="10" height="10" fill="gray" />
        <rect x="1" y="1" width="8" height="8" 
                    fill="greenYellow" stroke="black" stroke-width="0.5" />
    </svg>
    <view id="driehoek" viewBox="0,100 100,100" />
    <svg x="0" y="100" width="100" height="100" viewBox="0,0 10 10" >>
        <rect x="0" y="0" width="100" height="100" fill="gray" />
        <path d="M5,1 L1,9 L9,9 Z"     
                    fill="yellow" stroke="black" stroke-width="0.5" />
    </svg>
    <view id="ster" viewBox="100,100 100,100" />
    <svg x="100" y="100" width="100" height="100" viewBox="0,0 10 10" >>
        <rect x="0" y="0" width="10" height="10" fill="lightGray" />
        <path d="M1,1 L5,4 9,1 6,5 9,9 5,6
                    1,9 4,5 Z"  
                    fill="crimson" stroke="black" stroke-width="0.5" />
    </svg>
</svg>